<template>
	<view class="">
		<!-- navBar S -->
		<view class="swiperHead" :style="{borderBottom: '2rpx solid' +  headBorderColor}">
			<scroll-view scroll-x='false' scroll-with-animation :scroll-into-view=" 'tab-' + scrollIntoView"
				:style="{ height:currentSwiperHeight + 'rpx', background: navBarBackground }">
				<view class="swiperTab" v-for="(item,index) in swiperTabList" :key='index'
					:style="{ width:navBarWidth,lineHeight:currentSwiperHeight + 'rpx' }" :id=" 'tab-' + index "
					@tap="CurrentTab(index,item)">

					<!--导航标题-->
					<text
						:style="{ color:swiperTabIdx == index ? swiperCurrentColor:swiperColor, fontSize:swiperCurrentSize }">
						{{ item.name }}
					</text>
					<!--导航标题-->

					<!--线条-->
					<view class="swiperLine" v-show="currentSwiperLineShow">
						<view class="swiperLineActive"
							:class="[ swiperTabIdx == index && currentSwiperLineAnimatie ?'currentLine':'' ]" :style="{ 
						width:currentSwiperLineActiveWidth,
						height:currentSwiperLineActiveHeight,
						background:currentSwiperLineActiveBg
					}" v-if=" swiperTabIdx == index ">
						</view>
					</view>
					<!--线条-->

				</view>
			</scroll-view>
		</view>
		<!-- navBar E -->

		<!-- 内容轮播 S -->
		<view :style="{ marginTop: swiperMarginTop }">
			<swiper :style="{height: swiperBoxHeight}" :current="swiperTabIdx" @change="SwiperChange">
				<swiper-item v-for="(it,ind) in swiperTabList" :key='ind'>
					<scroll-view scroll-y="true" refresher-enabled enable-back-to-top
						:refresher-triggered="refresherTriggered" @scrolltolower="handleScrolltolower"
						@refresherrefresh="handleRefresherrefresh" class="scroll-view-box">
						<view v-for="(item,index) in currentList" :key="index">
							<slot name="slotItem" :item="item" :index="index" :curNavbar="curNavbar"
								:extraInfo="extraInfo"> {{item}} </slot>
						</view>
						<slot name="noData">
							<view v-if="!currentList.length && noDataShow" class="no-data">
								<image class="empty-img" :src="noDataImg" mode="aspectFill"></image>
								<view class="">
									暂无数据
								</view>
							</view>
						</slot>
						<slot name="more">
							<uni-load-more v-if="loadMoreShow && currentList.length" :status="showLoadMore" />
						</slot>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 内容轮播 E -->

	</view>
</template>

<script>
	/**
	 * swiperNavBar 轮播导航展示组件
	 * @description 用于一个导航栏任意个导航，每个导航内容栏可以左右滚动切换，上拉加载，下拉刷新
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=5370
	 * @property {Array} swiperTabList 必填 导航列表
	 * @property {Number} swiperTabIdx 必填 导航对应列表下标
	 * @property {Array} currentList 必填 当前展示的列表
	 * @property {Object} curNavbar 必填 当前选中的导航的值
	 * @property {Number} scrollIntoViewNum = [2]  滚动的元素展示位置
	 * @property {String} navBarBackground = [#ffffff] 	导航的背景色
	 * @property {String} swiperCurrentSize = [26rpx] 
	 * @property {String} swiperColor = [#333333] 导航栏字体未选中前颜色
	 * @property {String} swiperCurrentColor = [#1D63FF] 选中当前导航栏字体颜色
	 * @property {String} navBarWidth = [20%] 导航的宽度 % rpx  px
	 * @property {Number} currentSwiperHeight = [88] 当前导航的高度度 rpx px
	 * @property {Boolean} currentSwiperLineShow = [true] 是否显示线条
	 * @property {String} currentSwiperLineActiveWidth = [60rpx] 当前选中的导航栏线条的宽度
	 * @property {String} currentSwiperLineActiveHeight = [6rpx] 当前选中的导航栏线条的高度度
	 * @property {String} currentSwiperLineActiveBg = [#1D63FF] 当前选中的导航栏线条颜色
	 * @property {Boolean} currentSwiperLineAnimatie = [true] 当前选中的导航栏线条过渡效果
	 * @property {String} swiperMarginTop = [0rpx] 内容区距离navbar的margin-top
	 * @property {String} headBorderColor  导航的底边线 设置了就有，不设置就没有
	 * @property {String} swiperBoxHeight swiper内容区可滚动高度
	 *  @value h5 -->  calc(100vh - 88rpx - 88rpx)
	 *  @value 非h5 -->  calc(100vh - 88rpx)
	 * @property {String} showLoadMore = [more|loading|noMore] 加载更多的显示状态 按需必传	noMore没有更多	loading加载中	more加载前
	 *  @value more loading前
	 * 	@value loading loading中
	 * 	@value noMore 没有更多了
	 * @property {Boolean} loadMoreShow = [true] 是否显示加载更多
	 * @property {Boolean} noDataShow = [true] 没有数据时的展示信息, 默认没有数据时展示  “无数据提示”
	 * @property {Object} extraInfo  列表另外展示的值
	 */
	import slotItem from "./slotItem.vue";
	export default {
		compontent: {},
		props: {
			/* 必填 S */


			//导航列表
			swiperTabList: {
				type: Array,
				default: []
			},

			//导航对应列表下标
			swiperTabIdx: {
				type: Number,
				default: 0
			},

			// 当前展示的列表
			currentList: {
				type: Array,
				default: []
			},

			// 当前选中的导航的值
			curNavbar: {
				type: Object
			},
			/* 必填 E */

			/* 选填 S */
			//滚动的元素展示位置
			scrollIntoViewNum: {
				type: Number,
				default: 2
			},
			// 导航的背景色
			navBarBackground: {
				type: String,
				default: '#ffffff'
			},

			//导航的字体大小
			swiperCurrentSize: {
				type: String,
				default: '26rpx'
			},

			//导航栏字体未选中前颜色
			swiperColor: {
				type: String,
				default: '#333333'
			},

			//选中当前导航栏字体颜色
			swiperCurrentColor: {
				type: String,
				default: '#1D63FF'
			},

			//导航的宽度 % rpx  px
			navBarWidth: {
				type: String,
				default: '20%'
			},

			//当前导航的高度度 rpx px
			currentSwiperHeight: {
				type: Number,
				default: 88
			},

			//是否显示线条
			currentSwiperLineShow: {
				type: Boolean,
				default: true
			},

			//当前选中的导航栏线条的宽度
			currentSwiperLineActiveWidth: {
				type: String,
				default: '60rpx'
			},

			//当前选中的导航栏线条的高度度
			currentSwiperLineActiveHeight: {
				type: String,
				default: '6rpx'
			},

			//当前选中的导航栏线条颜色
			currentSwiperLineActiveBg: {
				type: String,
				default: '#1D63FF'
			},

			//当前选中的导航栏线条过渡效果
			currentSwiperLineAnimatie: {
				type: Boolean,
				default: true
			},

			// 内容区距离navbar的margin-top
			swiperMarginTop: {
				type: String,
				default: '0rpx'
			},

			// 导航的底边线设置了就有，不设置就没有
			headBorderColor: {
				type: String,
			},

			// swiper内容区可滚动高度
			swiperBoxHeight: {
				type: String,
				// #ifdef H5
				default: 'calc(100vh - 88rpx - 88rpx)'
				// #endif
				// #ifndef H5
				default: 'calc(100vh - 88rpx)'
				// #endif
			},

			// 加载更多的显示状态 按需必传	noMore没有更多	loading加载中	more加载前
			showLoadMore: {
				type: String,
				default: 'more'
			},

			// 是否显示加载更多
			loadMoreShow: {
				type: Boolean,
				default: true
			},

			// 没有数据时的展示信息, 默认没有数据时展示  “无数据提示”
			noDataShow: {
				type: Boolean,
				default: true
			},

			// 另外展示的值
			extraInfo: {
				type: [String, Object, Boolean, Number],
				default: ''
			},


		},
		data() {
			return {
				scrollIntoView: 0, //设置哪个方向可滚动，则在哪个方向滚动到该元素 轮播切换
				refresherTriggered: true, // 设置当前下拉刷新状态
				SurePullDown: true, // 可以进行下拉 防止多次触发下拉 
				noDataImg: ''
			}
		},
		methods: {

			CurrentTab: function(index, item) {
				this.scrollIntoView = Math.max(0, index - this.scrollIntoViewNum);
				this.$emit('change', index, item);
			},

			//滑动事件  自行完善需要的代码
			SwiperChange: function(e) {
				this.scrollIntoView = Math.max(0, e.detail.current - this.scrollIntoViewNum)
				// console.log(e)
				//console.log(e.detail)
				//console.log(e.detail.current);
				let obj = {
					swiperTabIdx: e.detail.current,
					// scrollIntoView: Math.max(0, e.detail.current - 1)
				}
				this.$emit('swiperChange', obj)
			},

			// 滚动到底部
			handleScrolltolower() {
				this.$emit('scrolltolower')
			},
			// 下拉刷新
			handleRefresherrefresh(item, index) {
				this.refresherTriggered = true
				if (this.SurePullDown) {
					this.$emit('refresherrefresh')
				}
				this.SurePullDown = false
			},

			// 停止刷新
			stopPullDownRefresh() {
				this.refresherTriggered = false
				this.SurePullDown = true
			},

		}
	}
</script>

<style lang="scss">
	/* navbar S */
	.scroll-view-box {
		height: 100%;
		box-sizing: border-box;
	}

	.swiperHead scroll-view {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.swiperTab {
		display: inline-flex;
		flex-direction: column;
		text-align: center;
		position: relative;
	}

	.swiperLine {
		position: absolute;
		bottom: 6rpx;
		left: 0;
		width: 100%;
		z-index: 10;
	}

	.swiperLineActive {
		margin: 0 auto;
		border-radius: 30rpx;
	}

	@keyframes currentLine {
		0% {
			transform: scale(0.5);
		}

		100% {
			transform: scale(1);
		}
	}

	.currentLine {
		animation: currentLine 300ms forwards;
	}

	/* navbar E */
	.no-data {
		text-align: center;
		line-height: 120rpx;
		margin: 0 auto;

		.empty-img {
			width: 320rpx;
			height: 320rpx;
		}
	}
</style>
